<template>
    <view class=" ">
        <z-paging
            ref="paging"
            v-model="dataList"
            @query="queryList">
            <template #top>
                <tn-navbar>费率管理</tn-navbar>
            </template>
            <view class="tn-bg-card">
                <view class="tn-p">
                    <view
                        v-for="(item, index) in dataList"
                        :key="index"
                        class="tn-shadow-md tn-p-sm tn-mb tn-radius tn-black_text tn-white_bg">
                        <view class="tn-flex justify-between justify-start tn-mb-sm">
                            <view>
                                <tn-title
                                    :title="item.name+'-费率'"
                                    mode="vLine"
                                    assist-color="tn-blue"
                                    size="lg" />
                            </view>
                            <text class="tn-round tn-white_text tn-orange_bg tn-text-bold tn-pt-xs tn-pb-xs tn-pr-sm tn-pl-sm">
                                {{ item.type }}
                            </text>
                        </view>
                       
                        <view class="tn-flex justify-end tn-mt-sm">
							<view class="tn-m-xs">
							    <tn-button
							        :shadow="true"
							        shadow-color="tn-grey"
							        bg-color="tn-white"
							     @click="openTestForm(item.name,item.id)">
							        <tn-icon
							            name="edit-write-fill"
							            size="30"></tn-icon>
							        测试
							    </tn-button>
							</view>
                            <view class="tn-m-xs">
                                <tn-button
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    bg-color="tn-white"
                                 @click="cfsheep.$router.go('/pages/main/parkingLot/rateSetting',{id:item.id})">
                                    <tn-icon
                                        name="edit-write-fill"
                                        size="30"></tn-icon>
                                    编辑
                                </tn-button>
                            </view>
                            <view class="tn-m-xs">
                                <tn-button
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="handleDelete(item.id)">
                                    <tn-icon
                                        name="delete"
                                        size="30"
                                        color="tn-red"></tn-icon>
                                    删除
                                </tn-button>
                            </view>
                        </view>
                    </view>
                </view></view>

            <view class="tn-tabbar-height"></view>
            <template #loadingMoreNoMore></template>
        </z-paging>

        <view>
            <!-- 悬浮按钮 -->
            <tn-suspend-button
                icon="add"
                size="sm"
                bg-color="tn-gradient-bg__cool-5"
                text-color="tn-white"
                  @click="openForm('create')" /> 

            <!-- 删除弹框 -->
            <tn-modal ref="modalRef" />
			<RateModal ref="rateModalRef"  />
			<RateTestModal ref="rateTestModalRef"  />
        </view>
    </view>
</template>

<script setup lang="ts">
 import { onMounted, ref } from "vue";
 import TnSuspendButton from "tnuiv3p-tn-suspend-button/index.vue"; 
 import cfsheep from "@/cfsheep";
 import type { TnModalInstance } from "@/uni_modules/tuniaoui-vue3"; 
 import RateModal from "./modal/rate/RateModal.vue";
 import RateTestModal from "./modal/rate/RateTestModal.vue";
 
 
 // ===============模拟数据 =========================
 const inputValue = ref();
 const filterData = () => {};
 // 模拟数据
 const tempList = ref([]);
 
 // z-paging 示例
 const paging = ref(null);
 // 数据列表
 const dataList = ref();
 
 const queryList = (pageNo, pageSize) => {
     // 模拟数据
 
     for (let i = 0; i < 10; i++) {
         tempList.value.push({
             id: i,
             name: "地库" + i,
             type: "启用",
             duration: { value: 3, unit: "小时" },
             amount: "3小时",
             price: 2,
         });
     }
     paging.value.complete(tempList.value);
 };
 
 // ===========================================
 
 /** 添加/修改操作 */
 const rateModalRef = ref();
 const openForm = (type: string, id?: number) => {
     rateModalRef.value.open(type, id);
 }; 
 
 /** 测试操作 */
 const rateTestModalRef = ref();
 const openTestForm = (name: string, id?: number) => {
     rateTestModalRef.value.open(name, id);
 }; 
 //删除ref
 const modalRef = ref<TnModalInstance>();
 
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
     modalRef.value?.showModal({
         title: "提示",
         content: "是否删除通道",
         confirmText: "确定",
         cancelText: "取消",
         showCancel: true,
         cancel: () => {
             return true;
         },
         confirm: () => {
             deleteData(id);
         },
     });
 };
 
 // 删除逻辑
 const deleteData = (id: number) => {
     // 逻辑删除
     // 刷新列表
     paging.value.reload(true);
 }; 
</script>
<style lang="scss" scoped></style>
